/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-09-29 16:51:12
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-15 16:58:26
 * @FilePath: /react18-vite-admin/src/components/ui/Button/Button.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Button as AntdButton, type ButtonProps, ConfigProvider } from 'antd';
import { type ReactNode, type MouseEventHandler, forwardRef } from 'react';

import './Button.scoped.scss';

type ButtonType = ButtonProps['type'] | 'success' | 'danger' | 'warning';

type Props = {
    children: ReactNode;
    type?: ButtonType;
    htmlType?: ButtonProps['htmlType'];
    loading?: ButtonProps['loading'];
    onClick?: MouseEventHandler<HTMLElement>;
};

const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, Props>(
    (props: Props, ref) => {
        const { children, type, onClick, htmlType, loading } = props;
        let antdButtonType: ButtonProps['type'];
        let defaultBg = 'var(--bg-front)';
        let defaultColor = 'var(--c-text1-default)';
        let defaultHoverBorderColor = 'var(--c-primary)';
        let defaultHoverColor = 'var(--c-primary)';
        if (type === 'primary') {
            defaultBg = 'var(--bg-primary)';
            defaultColor = 'white';
            defaultHoverBorderColor = 'transparent';
            defaultHoverColor = 'white';
        } else if (type === 'success') {
            defaultBg = 'var(--bg-green)';
            defaultColor = 'white';
            defaultHoverBorderColor = 'transparent';
            defaultHoverColor = 'white';
        } else if (type === 'danger') {
            defaultBg = 'var(--bg-red)';
            defaultColor = 'white';
            defaultHoverBorderColor = 'transparent';
            defaultHoverColor = 'white';
        } else if (type === 'warning') {
            defaultBg = 'var(--bg-orange)';
            defaultColor = 'white';
            defaultHoverBorderColor = 'transparent';
            defaultHoverColor = 'white';
        }

        return (
            <ConfigProvider
                theme={{
                    components: {
                        Button: {
                            defaultBg,
                            defaultColor,
                            defaultHoverBg: defaultBg,
                            defaultHoverColor,
                            defaultHoverBorderColor
                        }
                    }
                }}
            >
                <AntdButton
                    ref={ref}
                    className="button"
                    type={antdButtonType}
                    htmlType={htmlType}
                    onClick={onClick}
                    loading={loading}
                >
                    {children}
                </AntdButton>
            </ConfigProvider>
        );
    }
);

export default Button;
